<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://webapi.amap.com/maps?v=2.0&key=78407fc70d134bc823f2e0d8d74fb1d6'></script>
</head>

<body class="running">
    <!-- 户外跑 -->
    <header class="outrun">
        <span>户外跑</span>
        <p>运动中</p>
    </header>
    <!-- 公里数 -->
    <div class="mileage">
        <span id="meter">99.99</span>
        公里
    </div>
    <!-- GPS信号 -->
    <div class="gps">
        <p>GPS信号弱,数据精准度低</p>
        <i class="iconfont icon-ditu"></i>
    </div>
    <!-- 仪表盘 -->
    <div class="instrument">
        <div><i class="iconfont icon-sudu"></i>配速<span id="speed">5米/秒</span> </div>
        <div><i class="iconfont icon-shijian"></i>用时<span id="duration">00:00:20</span> </div>
        <div><i class="iconfont icon-huomiao"></i>千卡<span id="calorie">300</span></div>
    </div>
    <!-- 按钮 -->
    <div class="btns">
        <div id="play"><i class="iconfont icon-play"></i>继续</div>
        <div id="pause"><i class="iconfont icon-zanting1"></i>暂停</div>
        <div id="end"><i class="iconfont icon-close"></i>结束</div>
    </div>
</body>

</html>